<template>
  <div class="order">
    <el-card class="box-card">
      <div slot="header" class="clearfix"></div>
      <el-form inline :model="formData" class="demo-form-inline" width="100%">
        <el-form-item label="订单号">
          <el-input v-model="formData.orderNo" placeholder="审批人"></el-input>
        </el-form-item>
        <el-form-item label="收货人">
          <el-input
            v-model="formData.consignee"
            placeholder="收货人"
          ></el-input>
        </el-form-item>
        <el-form-item label="手机号">
          <el-input v-model="formData.phone" placeholder="手机号"></el-input>
        </el-form-item>
        <el-form-item label="订单状态">
          <el-select v-model="formData.orderState" placeholder="活动区域">
            <el-option label="已受理" value="已受理"></el-option>
            <el-option label="派送中" value="派送中"></el-option>
            <el-option label="已完成" value="已完成"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="选择时间">
          <el-date-picker
            v-model="formData.date"
            value-format="yyyy-MM-dd HH:mm:ss"
            type="datetimerange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
          ></el-date-picker>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="onSubmit">查询</el-button>
        </el-form-item>
      </el-form>
      <!-- 表格 -->
      <el-table class="tableData" :data="tableData" border style="100%">
        <el-table-column prop="orderNo" label="订单号" width="150">
        </el-table-column>
        <el-table-column label="下单时间" width="120">
          <template slot-scope="{ row }">
            {{ row.orderTime | formatYMDhms }}
          </template>
        </el-table-column>
        <el-table-column prop="phone" label="手机号" width="120">
        </el-table-column>
        <el-table-column prop="consignee" label="收货人" width="120">
        </el-table-column>
        <el-table-column prop="deliverAddress" label="配送地址" width="300">
        </el-table-column>
        <el-table-column label="送达时间" width="120">
          <template slot-scope="{ row }">
            {{ row.deliveryTime | formatYMDhms }}
          </template>
        </el-table-column>
        <el-table-column prop="remarks" label="用户备注" width="120">
        </el-table-column>
        <el-table-column prop="orderAmount" label="订单金额" width="120">
        </el-table-column>
        <el-table-column prop="orderState" label="订单状态" width="120">
        </el-table-column>
        <el-table-column fixed="right" label="操作" width="100">
          <template slot-scope="{ row }">
            <el-button @click="handleDetail(row)" type="text" size="small"
              >查看</el-button
            >
            <el-button type="text" size="small" @click="handleEdit(row)"
              >编辑</el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页 -->
      <el-pagination
        class="pagination mt20"
        :page-size="pageSize"
        :total="total"
        :current-page="currentPage"
        @current-change="handleCurrentChange"
        background
        layout="total,prev,pager,next,jumper"
      ></el-pagination>
    </el-card>
  </div>
</template>

<script>
import { orderList } from "@/api/order";
export default {
  data() {
    return {
      formData: {
        orderNo: "",
        consignee: "",
        phone: "",
        orderState: "",
        date: [],
      },
      //表格数据
      tableData: [],
      //分页数据
      currentPage: 1,
      pageSize: 3,
      total: 0,
      //查询表单数据
      searchForm: {},
    };
  },
  methods: {
    //查询
    onSubmit() {
      // console.log("submit!");
      //把当前页重置为第一页
      this.currentPage = 1;
      //把当前的fromDate的值 赋值给searchForm
      this.searchForm = { ...this.formData };
      this.getData();
    },
    //改变当前页
    handleCurrentChange(val) {
      this.currentPage = val;
      this.getData();
    },
    async getData() {
      let currentPage = this.currentPage;
      let pageSize = this.pageSize;
      //处理日期格式 处理默认值null问题
      let date = JSON.stringify(this.searchForm.date || "");
      let res = await orderList({
        currentPage,
        pageSize,
        ...this.searchForm, //查询表单数据进来
        date,
      });
      let { total, data } = res.data;
      this.total = total;
      this.tableData = data;
    },
    //查看 query
    handleDetail(row) {
      console.log(row.id);
      this.$router.push({
        path:'/order/order-details',
        query:{id:row.id}
      })
    },
    //编辑
    handleEdit(row) {
      console.log(row.id);
      this.$router.push(`/order/order-edit/${row.id}`)
    },
  },
  created() {
    this.getData();
  },
};
</script>

<style lang="scss" scoped>
.order {
  padding: 0 20px;
  margin-top: 15px;
}
.box-card {
  width: 1300px;
}
.tableData {
  width: 1000px;
}
.pagination {
  margin-top: 30px;
  margin-left: 120px;
}
.tableData{
  margin-left: 100px;
}
</style>